<template>
  <!-- > 目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾.

> 提示: 操作数组里的顺序, v-for就会重新渲染li -->
  <div>
    <ul>
      <!-- 用v-for方法遍历list这个数组 -->
      <!-- ↓第一个代表遍历的内容，第二个代表索引 -->
      <li v-for="(item, index) in list" :key="index">
        <!-- 差值表达式直接读取data里面的list的item -->
        <!-- 因为我们上面已经遍历了这个数组 所以可直接写item -->
        {{ item }}
      </li>
    </ul>
    <!-- 给走一走添加点击事件 点击后调用一个函数 -->
    <button @click="MobileOPAL">走一走</button>
  </div>
</template>

<script>
export default {
  // 储存数据的地方
  data() {
    return {
      list: ['帅哥', '美女', '程序员'],
    }
  },
  //
  // 储存方法的地方
  methods: {
    MobileOPAL() {
      // 用reverse的方法让数组翻转
      this.list = this.list.reverse()
      //或者其他办法  先把帅哥的值变成程序员 再把程序员的值变成帅哥
      // this.list = this.list.splice(1,1)
    },
  },
}
</script>

<style></style>
